<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="城市列表"
      left-arrow
      z-index="100000"
      @click-left="back"
    />
    <div class="city">
      <div class="nowcity">当前城市</div>
      <div class="choosecity">
        <span>{{ nowcity }}</span>
        <span @click="jumptoreindex">重新定位</span>
      </div>
    </div>
    <div class="city">
      <div class="nowcity">热门城市</div>
      <div class="hotcitylist">
        <span
          v-for="item in hotcitylist"
          :key="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div class="citylist">
      <van-index-bar :sticky-offset-top="46" :index-list="wordlist">
        <van-index-anchor index="A">A</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.A"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="B">B</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.B"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="C">C</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.C"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="D">D</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.D"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="E">E</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.E"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="F">F</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.F"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="G">G</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.G"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="H">H</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.H"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="I">I</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.I"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="J">J</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.J"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="K">K</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.K"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="L">L</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.L"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="M">M</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.M"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="N">N</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.N"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="O">O</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.O"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="P">P</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.P"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="Q">Q</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.Q"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="R">R</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.R"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="S">S</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.S"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="T">T</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.T"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="U">U</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.U"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="V">V</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.V"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="W">W</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.W"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="X">X</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.X"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="Y">Y</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.Y"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
        <van-index-anchor index="Z">Z</van-index-anchor>
        <van-cell
          v-for="(item, index) in this.citylist.Z"
          :key="index"
          :title="item.name"
          @click="jumptoindex(item.name, item.adcode, item.citycode)"
        />
      </van-index-bar>
    </div>
  </div>
</template>
<script>
import { getAllcity } from "@/apis/city.js";
import {
  setChooseCity,
  removeChooseCity,
  getLocationPermissions,
  setLocationPermissions,
} from "@/utils/auth";
import { baseUtils } from "@/utils/baseUtils";
import { _local } from "@/utils/storage";
export default {
  data() {
    return {
      nowcity: "",
      citylist: "",
      wordlist: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      hotcitylist: [
        { name: "北京市", adcode: "110000", citycode: "010" },
        { name: "上海市", adcode: "310000", citycode: "021" },
        { name: "广州市", adcode: "440100", citycode: "020" },
        { name: "深圳市", adcode: "440300", citycode: "0755" },
        { name: "杭州市", adcode: "330100", citycode: "0571" },
        { name: "重庆市", adcode: "500000", citycode: "023" },
        { name: "长沙市", adcode: "430100", citycode: "0731" },
        { name: "成都市", adcode: "510100", citycode: "028" },
      ],
    };
  },
  created() {
    this.getallcity();
    this.nowcity = _local.get("city")
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    async getallcity() {
      await getAllcity({}).then((response) => {
        this.citylist = response.result;
      });
    },
    jumptoindex(city, adCode, cityCode) {
      setChooseCity(cityCode, city, adCode);
      _local.set("city", city);
      _local.set("cityCode", cityCode);
      _local.set("adCode", adCode);
      this.$router.go(-1);
      setTimeout(() => {
        window.location.reload();
      }, 100);
    },
    jumptoreindex() {
      removeChooseCity();

      const device = baseUtils.allegeDevice();

      if (device === "android") {
        this.$plusReady(() => {
          // 生产厂家
          const brand = plus.device.vendor;
          if (brand === "Xiaomi" && getLocationPermissions() === false) {
            setLocationPermissions(0);
          }
        });
      }

      this.$router.push("/home/index")
      setTimeout(() => {
        window.location.reload();
      }, 100);
    },
  },
};
</script>

<style lang="less" scoped>
.city {
  margin-top: 10px;
  padding: 0 10px;
  font-size: 15px;
  .nowcity {
    font-weight: bold;
    margin-bottom: 5px;
  }
  .choosecity {
    margin-top: 5px;
    span {
      color: #45b7cb;
    }
    :last-child {
      float: right;
    }
  }
  .hotcitylist {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    span:active{
      background-color: #ddd;
    }
    span {
      width: 14%;
      color: #6c6c6c;
      display: inline-block;
      border: 1px solid #d9d9d9;
      border-radius: 5px;
      padding: 2px 12px;
      margin-bottom: 10px;
    }
  }
}
.citylist {
  background-color: #fff;
  padding: 0 0 50px;
  font-size: 16px;
}
</style>
